<template>
  <div class="manage">
    <el-dialog :title="modalType === 0 ?  '添加用户':'修改用户信息' " :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
      <!-- 用户的表单信息 -->
      <el-form :inline="true" :rules="rules" ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input placeholder="请输入年龄" v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker v-model="form.birth" value-format="yy-MM-DD" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input placeholder="请输入地址" v-model="form.addr"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="handleAdd">
        +新增
      </el-button>
      <div class="userForm">
        <el-form :inline="true" :model="userForm">
        <el-form-item>
          <el-form-item>
            <el-input placeholder="请输入名称" v-model="userForm.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
      </div>
      
    </div>
    <div class="common-tabel">
      <el-table stripe height="90%" :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <!-- 插槽 -->
          <template slot-scope="scope">
            <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄">
        </el-table-column>
        <el-table-column prop="birth" label="出生日期">
        </el-table-column>
        <el-table-column prop="addr" label="地址">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination layout="prev, pager, next" :total="total" @current-change="handlePage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getUser, addUser, editUser, delUser } from '../api'
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: ''
      },
      //搜索
      userForm: {
        name: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名' }],
        age: [{ required: true, message: '请输入年龄' }],
        sex: [{ required: true, message: '请选择性别' }],
        birth: [{ required: true, message: '请选择出生日期' }],
        addr: [{ required: true, message: '请输入地址' }]
      },
      tableData: [],
      modalType: 0, //0 表示新增的弹窗， 1表示编辑的弹窗
      total: 0, //当前数据总条数
      pageData: {
        page: 1, //第几页
        limit: 10 //每页显示几条数据
      }
    }
  },
  methods: {
    //提交用户表单,点击确定按钮
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.modalType === 0) {
            //添加用户
            addUser(this.form).then(() => {
              //重新获取列表数据
              this.getList()
            })
          } else {
            // 修改用户
            editUser(this.form).then(() => {
              //重新获取列表数据
              this.getList()
            })
          }
          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible = false
        }
      })
    },
    //弹窗关闭时执行的函数
    handleClose() {
      //清空表单数据
      this.$refs.form.resetFields()
      //关闭弹窗
      this.dialogVisible = false
    },
    //点击取消时
    cancel() {
      this.handleClose()
    },
    //点击编辑按钮
    handleEdit(row) {
      //1 表示编辑的弹窗
      this.modalType = 1
      //打开弹窗
      this.dialogVisible = true
      //注意要对当前数据进行深拷贝，否则会出错
      this.form = JSON.parse(JSON.stringify(row))
    },
    //点击删除按钮
    handleDelete(row) {
      this.$confirm('是否确认删除该用户信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delUser({ id: row.id }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            //重新获取列表数据
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //点击新增按钮
    handleAdd() {
      //0 表示新增的弹窗
      this.modalType = 0
      //打开弹窗
      this.dialogVisible = true
    },
    //获取的列表数据
    getList() {
      getUser({ params: { ...this.userForm, ...this.pageData } }).then(({ data }) => {
        this.tableData = data.list
        this.total = data.count || 0
        // console.log(data);
      })
    },
    //选择页码的回调函数
    handlePage(val) {
      this.pageData.page = val
      //重新获取列表数据
      this.getList()
    },
    //列表查询
    onSubmit() {
      //重新获取列表数据
      this.getList()
    }
  },
  mounted() {
    this.getList()
  }
}
</script>
<style lang="less" scoped>
.manage {
  height: 90%;
  .manage-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .userForm{
      
      height: 100%;
      padding-top: 10px;
    }
    
  }
  .common-tabel {
    height: 100%;
    position: relative;
    .pager {
      bottom: 0;
      right: 10px;
      position: absolute;
    }
  }
}
</style>